<template>
    <div class="news-detail">
        <div class="info">
            <!-- <div class="avatar">
                <img :src="avatar" alt="">
            </div> -->
            <div class="d">
                <h4>{{newsInfo.title}}</h4>
                <p>{{newsInfo.createDateName}} <span style="margin-left: 5px;">来源: {{dataFrom}}</span></p>
            </div>
        </div>
        <card class="main">
            <div class="content" slot="content">
                <div v-html="newsInfo.context"></div>
                <!-- <p class="content-text">{{newsInfo.context}}</p> -->
            </div>
            <div class="footer" slot="footer">
                <div class="view">
                    <!-- <span>点赞·{{view}}</span> --><span v-if="newsInfo.readNumber">浏览·{{newsInfo.readNumber}}</span><span v-else>浏览·0</span>
                </div>
            </div>
        </card>
        <div class="comment-wrap">
            <div class="title">
                留言·{{commentNumber}}
            </div>
            <div class="comment-list">
                <comment class="comment" 
                v-for="(comment,index) in commentList" 
                :key="index" 
                :comment="comment">
                    <comment 
                    v-for="(comment,index) in comment.repeat" 
                    :key="index"
                    :comment="comment"
                    >

                    </comment>
                </comment>
            </div>
        </div>

        <div class="bottom">
            <div class="controls">
                <!-- <div :class="[isPraise ? 'active':'','item']" @click="handlePraise(isPraise)">
                    <i class="fa fa-heart-o"></i> 点赞
                </div> -->
                <div :class="[isCollect ? 'active':'','item']" @click="handleCollect(isCollect)">
                    <x-icon v-if="isCollect" class="heart" type="ios-star" size="20"></x-icon>
                    <x-icon v-if="!isCollect" class="heartOut" type="ios-star-outline" size="20"></x-icon>
                    <!-- <i class="fa fa-star-o"></i> --> 收藏
                </div>
            </div>
            <span class="connect" @click="handleFirstMsg(newsInfo.id)">我要留言</span>
        </div>
    </div>
</template>
<script>
import axios from '@/api/request'
import { Flexbox, FlexboxItem ,Card,Group,CellBox} from 'vux'
import comment from "../components/comment"
import bgMixin from "../mixins/bg";
import { mapGetters } from "vuex";
export default {
    name : 'shop-detail',
    components: {
    Flexbox,
        FlexboxItem,
        Card,Group,CellBox,
        comment,
    },
    mixins:[bgMixin],
    computed:{
        commentLength(){
            return this.commentList.length;
        }
    },
    data(){
        return{
            isPraise: false,
            isCollect: false,
            avatar:require('../assets/images/default-avatar.png'),
            dataFrom: '21克',
            price:15,
           
            view:299,
            commentList:[
                // {
                //     avatar:require('../assets/images/avatar2.png'),
                //     name:'千与千寻',
                //     content:'卡粉么？用了多久啦',
                //     time:'2017-07-02   21:30 :49',
                //     repyList:[
                //             {
                //                 avatar:require('../assets/images/default-avatar.png'),
                //                 name:'隔壁老王',
                //                 content:`主人回复@千与千寻：买来就只打开了包装试用过一次，几乎全新哦。`,
                //                 time:'2017-07-02   21:30 :49',
                //             }
                //     ]
                // }
            ],
            commentNumber:'',
            newsId:'',           
            newsInfo:'',           
        }
    },
    computed:{
        ...mapGetters({
          openId: 'doneOpenId',
          userId: 'doneUserId',
        }),
    },
    created(){
        this.newsId = this.$route.query.newsId;
        this.fetchNewsDetail();
        this.fetchCommentList();
    },
    mounted() {
        this.checkIsCollect()
    },
    methods:{
        //获取资讯详情
        fetchNewsDetail() {
            var self = this;
            axios('/device/information/get/'+self.newsId,'post',{}).then(res=>{
                if(res.data.code==1000){
                    console.log(res)
                    self.newsInfo = res.data.data;
                }
            })
        },
        //获取留言列表
        fetchCommentList() {
            var self = this;
            axios('/device/leaveMessage/allLeaveMessage','post',{proxyId:self.newsId}).then(res=>{
                if(res.data.code==1000){
                    console.log(res)
                    self.commentList = res.data.data.list;
                    self.commentNumber = res.data.data.number;
                }
            })
        },
        checkIsCollect(){
            let data = {
                userId: this.userId,
                proxyId: this.newsId,
            }
            axios('/device/collection/difference','post',data).then(res=>{
                if(res.data.code==1000){
                    console.log('是否收藏')
                    console.log(res)
                    if(res.data.data.informartion==1){
                        this.isCollect = true
                    }else{
                        this.isCollect = false
                    }
                }else{
                    this.isCollect = false
                }
            })
        },
        handleCollect(isCollect){   //底部收藏
            console.log(12)
            let dis
            if(isCollect){
                dis = 1
            }else{
                dis = 0
            }
            let data = {
                dis : dis,      // 0: 收藏、点赞 1: 取消收藏、取消点赞
                userId : this.userId,
                type : 0,       // 4: 收藏二手商品，5: 点赞二手商品
                proxyId : this.newsId  // productSecondId(二手商品id)
            }
            axios('/device/collection/inIf','post',data).then(res=>{
                if(res.data.code==1000){
                    if(dis==1){
                        this.isCollect = false
                    }else{
                        this.isCollect = true
                    }
                }
            })
        },
        //添加留言
        handleFirstMsg(id) {
            let self = this;
            this.$vux.confirm.prompt('请输入留言', {
                inputAttrs: {
                    type: 'text'
                },
                title: '留言',
                onCancel (value) {
                    // console.log(value)
                },
                onConfirm (value) {
                    console.log(self.userId)
                    let data = {
                        customerId : self.userId,    // 用户自己的ID
                        contentId : "",     // 回复对象id（该商品所属userId）
                        proxyId : self.newsId,     // 二手商品id
                        type :'1' , // 代表级别，1：一级评论，2：二级评论
                        content : value,    // 留言内容
                        state : '1',     // 1:公开展示，0:不公开展示
                        source: 0,     //0是资讯  1是二手商品
                    }
                    axios('/device/leaveMessage/create','post',data).then(res=>{
                        if(res.data.code==1000){
                            self.fetchCommentList() 
                            self.$vux.toast.text('留言成功！', 'middle')
                        }
                    })
                }
            })
        },
        //点赞
        // handlePraise(isPraise){   //底部点赞
        //     let dis
        //     if(isPraise){
        //         dis = 1
        //     }else{
        //         dis = 0
        //     }
        //     let data = {
        //         dis : dis,      // 0: 收藏、点赞 1: 取消收藏、取消点赞
        //         userId : this.userId,
        //         type : 4,       // 4: 收藏二手商品，5: 点赞二手商品
        //         proxyId : this.newsId  // productSecondId(二手商品id)
        //     }
        //     axios('/device/collection/inIf','post',data).then(res=>{
        //         if(res.data.code==1000){
        //             if(dis==1){
        //                 this.isPraise = false
        //             }else{
        //                 this.isPraise = true
        //             }
        //         }
        //     })
        // },
        //删除留言
        fetchComment(id) {
            axios('/device/leaveMessage/deleteLM','post',{
                id : id							// 留言id
            }).then(res=>{
                if(res.data.code==1000){
                    // console.log(res)
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
// @import "../assets/less/shopDetail.less";
.news-detail{
    padding-bottom: 1.733333rem /* 130/75 */ /* 120/75 */;
    overflow-x: hidden;
    .info{
        position: relative;
        display: flex;
        background: #fff;
        // width: 100%;
        // height: 160rem/75;
        // box-sizing: border-box;
        align-items: center;
        padding-left: 30rem/75;
        padding-top: 30rem/75;
        padding-bottom: 28rem/75;
        &::before{
            content: '';
            position: absolute;
            bottom: 0;
            background: #dcdcdc;
            height: 1px;
            width: 100%;
            left: .386667rem /* 29/75 */;
        }
        .d{
            h4{
                font-size: .4rem /* 30/75 */;
                color: #333333;
                font-size: 45rem/75;
            }
            p{
                margin-top: 6rem/75;
                font-size: .32rem /* 24/75 */;
                color: #999999;
            }
        }
    }

    .main{
        width: 100%;
        margin: 0;
        margin-bottom: .32rem /* 24/75 */;
        &::before{
            border: none;
        }
        .content{
            padding-left: .293333rem /* 22/75 */;
            padding-right: .293333rem /* 22/75 */;
            
            .price-wrap{
                padding-left: .24rem /* 18/75 */;
                padding-top: .64rem /* 48/75 */;
                line-height: 1;
                .shop-detail-price{
                    font-size: .64rem /* 48/75 */;
                    color: #ff4444;
                    margin-right: .306667rem /* 23/75 */;
                }
                .originPrice{
                    font-size: .32rem /* 24/75 */;
                    text-decoration: line-through;
                    color: #999999;
                }
            }
            .content-text{
                font-size: .426667rem /* 32/75 */;
                color: #333333;
                margin-top: .413333rem /* 31/75 */;
                margin-bottom: .32rem /* 24/75 */;
                line-height:.746667rem /* 56/75 */;
            }
            img{
                width: 100%;
                vertical-align: middle;
                margin-bottom: .213333rem /* 16/75 */;
            }
        }
        .footer{
            height: 87rem/75;
            line-height: 87rem/75;
            align-items: center;
            padding-left: .4rem /* 30/75 */;
            padding-right: .413333rem /* 31/75 */;
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            border-top: .013333rem /* 1/75 */ solid #dcdcdc;
            
            // .left{
            //     font-size: .346667rem /* 26/75 */;
            //     color: #4a73fd;
            //     line-height: .426667rem /* 32/75 */;
            //     display: flex;
            //     align-items: center;
            //     img{
            //         width: .426667rem /* 32/75 */;
            //         vertical-align: middle;
            //         margin-right: .28rem /* 21/75 */;
            //     }
            // }
            .view{
                float: right;
                font-size: .32rem /* 24/75 */;
                color: #999999;
                span{
                    margin-left: 32rem/75;
                }
            }
        }
    }
    .comment-wrap{
        background: #fff;
        .title{
            height: 1.173333rem /* 88/75 */;
            display: flex;
            align-items: center;
            padding-left: .426667rem /* 32/75 */;
            border-bottom: 1px solid #dcdcdc;
            color: #333333;
            font-size: .4rem /* 30/75 */;
            font-weight: bold;
        }
    
    }
    .bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        display: flex;
        height: 1.333333rem /* 100/75 */;
        justify-content: space-between;
        align-items: center;
        padding-left: 40rem/75;
        padding-right: 30rem/75;
        box-shadow: 0 -3px 5px rgba(0, 0, 0, .2);
        .controls{
            display: flex;
            // width: 50%;
            align-items: center;
            .item{
                display: flex;
                align-items: center;
                font-size: .32rem /* 24/75 */;
                color: #444444;
                margin-right: 62rem/75;
                i{
                    font-size: 1.3em;
                    color: #666;
                }
                .heart{
                    display: block;
                    fill: #ff4444;
                    //color: #ff4444;
                }
            }
            .active{
                font-size: .32rem /* 24/75 */;
                color: #ff4444;
                i{
                    font-size: 1.3em;
                    color: #ff4444;
                }
            }
            //.praise{
            //    margin-right: 62rem/75;
            //}
        }
        .connect{
            width: 160rem/75;
            height: 60rem/75;
            color: #fff;
            text-align: center;
            line-height: 60rem/75;
            background-color: #ff4444;
        }
    }
}
</style>


